<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关注</title>
    <style>
         /* nav大盒子 */
         .nav
        { 
            width:1868px;
            height:93px;
            background-color: red;

                                  
        }   
        /* 黑色部分  */
        .black{
            width:1868px;
            height:78px;
            background-color: #242424;
            position: relative;
            


        }
        /* logo */
        .wang img{
            height:53px;
            width:225px;
            margin-left:100px;
            float:left;
            
           }
        
        
            
           
            
                             
            
           
            
        
        
        /* 导航栏内容 */
        .box35 li {
            width:110px;
            height:78px;
            background-color:#242424 ;
            float:left;
            list-style: none;
            text-align: center;
            line-height:79px;
           

          

        }
        
        .box35 li a{
            text-decoration: none;
            color:white;


        }
        .box35 li:hover{
            background-color:#000;
        }
        /* 搜索框 */
        .box36{
            width:200px;
            height:40px;
            background-color: #fff;
            
            display:flex;
            border-radius: 20px;
            float:left;
            margin-left:60px;
           
        }
        .box36 img{
            width:40px;
            height:40px;


        }
        .box37{
           line-height:40px;

        }
        /* 创作者中心 */
        .box38{
            width:114px;
            height:40px;
            border:1px gray solid;
           float:left;
           border-radius: 20px;
           text-align: center;
           line-height:40px;
           margin-left:10px;
           color:white;

        }
        /* 头像 */
        .box39 img{
            height:40px;
            width:40px;
            border:1px solid black;
            border-radius: 20px;
            margin-left:27px;
            background-color: #fff;
            
        }
        .box40{
            width:490px;
            height:40px;
            background-color: #242424;
            display:flex;
            position:absolute;
            top:20px;
            right:350px;
            


        }


    /* 去除默认 */
    *{
        margin:0;
        padding:0;
    
    box-sizing:border-box;
    }
    /* 整体一个大盒子 */
    .big{
        height:735px;
        width:1394px;
        background-color: #f5f5f5;
        float:left;

    }
    /* 左面和右面部分 */
    .box1{
        height: 1500px;
        width:140px;
        background-color:#f5f5f5;
        float:left;
        

    }
    /* 中间部分 */
    .box2{
        
        width:1250px;
        height:735px;
        background-color: white;
        
        position: relative;
        display:flex;
        
        


    }
    /* 动态部分 */
    .box3{
        width:779px;
        height:1500px;
        background-color: white;
        margin-left:35px;
        
        
        
        
    }
    /* 动态部分的盒子 */
     .box4{
        width:779px;
        height:72px;
        background-color: white;
        border-bottom:4px solid #c20c0c;
        
        
     }
     /* 动态的盒子 */
     h1{
        height:68px;
        width:70px;
        background-color:white;
        text-align: center;
        line-height:76px;
        float:left;

     }
     /* 按钮一的盒子 */
     .box4  .button1{
        
        width:90px;
        height:29px;
        margin-right:12px;
        border:2px solid #d0d0d0;
        margin:0 auto;
        background-color: #fff;
        margin-top:34px;
        border-radius: 20px;
       
       
        
        
        

     }
     /* 按钮二的盒子 */
     .box4  .button2{
        float:right;
        width:90px;
        height:29px;
        border:2px solid #d0d0d0;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 34px;
        border-radius: 20px;
        
       

        
        
     }
     /* 按钮一与按纽二的盒子 */
     .box5{
        width:195px;
        height:72px;
        float:right;
        
        
     }
     /* 近三个月部分 */
     .box6{
        width:779px;
        height:50px;
        background-color: white;
        border:1px solid #cccccc;
        margin-top:21px;
        color:#cccccc;
        text-align: center;
        line-height:50px;
        font-size:14px;
                   
     }
     /* 小秘书图片 */
     .box7{
        width:779px;
        height:57px;
        background-color:white;
        margin-top:43px;
        background-image: url(./xiaomishu.png);
        background-repeat: no-repeat;
        

     }
     /* 云音乐小秘书和分享单曲的盒子 */
     .box8 {
        height:57px;
        width:203px;
        background-color: white;
        margin-left:78px;
        
        
        }
    /* 取消下划线 */
     .box9{
     text-decoration: 0;
     color:#0c73c2;
     }
     /* 单独设置颜色 */
     .box9 span{
        color:#906666;

     }
     /* 设置时间 */
    .box10{
        width:37px;
        height:17px;
        background-color: white;
        margin-top:17px;
        color:#ba9999;


    }
    /* 早安世界文字 */
    .box11{
        margin-left:70px;
        width:240px;
        height:16px;
        background-color: #fff;
        margin-top:18px;



    }
    /* 早安世界设置颜色 */
    .box11 a{
        color:#0c73c2;
    }
    /* 视频盒子*/
    .box12{
        height: 74px;
        width:709px;
        margin-top:12px ;
        background-color: #f5f5f5;
    

    }
    /* 视频图片 */
    .box12 img{
        height:50px;
        width:50px;
        
        margin-top:14px;
        float:left;

    }
    /* 视频文字 */
    .box13{
        height:42px;
        width:339px;
        float:left;
        margin-top:18px;
        margin-left:10px;
        
       

    }
    /* 评论图片  */
    .box14 img{
        height:279px;
        width:279px;
        margin-top:10px;

    }
    /* 点赞转发评论部分 */
    .box15{
        height: 15px;
        width:709px;
        background-color:white;
    }
    .box15 li{
        width:80px;
        height:10px;
        list-style:none;
        float:right;
        margin-left:-21px;
        
    }
    .box15 li a{
        height:10px;
        width: 150px;
        background-color: white;
        border-right:2px solid gray;
        text-decoration:none;
        color:#6dd1ff;
        font-size:15px;
       
        
        
       
    }
    .box15 li a:hover{
        text-decoration:underline;

    }
    .box15 .mei a{
        border-right:1px white solid;
    }

    .box41{
        width:779px;
        height:596px;
        background-color: white;
        margin-left:0px;
       


    }
    .box42{
        height:57px;
        width:203px;
        background-color: white;
       
        
        


    }
     .box43{
        text-decoration: none;
     }
     .box43 span{
        color:gray;
     }
     .box44{
        margin-top: 20px;;
     }

     .box45 a{
        text-decoration:none ;
        
     }
     .box45{
        margin-top:15px;
        
     }


     .box46 
     {
        height: 74px;
        width:709px;
        margin-top:12px ;
        background-color: #f5f5f5;


     }
     .box46 img{
        height:50px;
        width:50px;
        
        
        float:left;


     }
     .box47 span{

        height:42px;
        width:339px;
        float:left;
        margin-top:18px;
        margin-left:15px;
        

     }
     .box49{
        height: 15px;
        width:709px;
        background-color:white;
    }
    .box49 li{
        width:80px;
        height:10px;
        list-style:none;
        float:right;
        margin-left:-21px;
        
    }
    .box49 li a{
        height:10px;
        width: 150px;
        background-color: white;
        border-right:2px solid gray;
        text-decoration:none;
        color:#6dd1ff;
        font-size:15px;
       
        
        
       
    }
    .box49 li a:hover{
        text-decoration:underline;

    }
    .box49 .you a{
        border-right:1px white solid;
    }

    




























   /* 个人空间 */
   .box16{
    width:373px;
    height:241px;
    background-color:#f3f3f3;
    position:absolute;
    right:0px;
    top:0px;
    border-bottom:2px solid #d5d5d5;
    
    }
    .box17{
        display:flex;
    }
    .box17 img{

        height:81px;
        width:81px;
        margin-top:46px;
        margin-left:38px;
        border:2px solid gray;
    }
    .box17 p{
        font-size:25px;
        margin-top:46px;
        margin-left:25px;
    }
   .box18 {
    width:250px;
    height:56px;
    background-color: pink;
    margin-top:36px;
    margin-left:17px;
    display:flex;
   }
   .box18 ul li{
    width:83px;
    height:56px;
    background-color:#f3f3f3;
    list-style: none;
    float:left;
    border-right:2px solid gray;
    text-align: center;
   }
   
    /* 明星用户 */
   .box22{
    height:60px;
    width:373px;
    background-color:white;
    display: flex;
    position: absolute;
    right:0;
    top:241px;
    border-bottom:2px solid gray;
    justify-content: space-between;
   }
   .box22 .ming{
    font-size:18px;
    line-height:84px;
    

   }
  .box22 .huan{
    font-size:18px;
    margin-left:50px;
    line-height:84px;

  }
  .box22 .huan a{
    color:gray;
    text-decoration:none;

  }
  .box22 .huan a:hover{
    color:red;
  }
/* 人物大盒子 */
.box25{
    height:267px;
    width:372px;
    background-color: white;
    position:absolute;
    right:40px;
    top:305px;

}
/* 尚雯婕 */
.box26{
    width:292px;
    height:55px;
    background-color:white;
    margin-left:41px;
    display:flex;
    position:relative;
    margin-top:20px;

  

}
.box26 img{
    width:55px;
    height:55px;
  

}
.box26 p img{
    width:20px;
    height:20px;
    
}
.box26 .yuan{
    color:gray;
}
.box27{
    margin-left:10px;
}


.box28 img{
    height:16px;
    width:16px;
}
.box28{
    height:25px;
    width:63px;
    border:2px solid gray;
    border-radius: 5px;
    position:absolute;
    right:2px;
    top:10px;

    
}
/* 周子琰 */
.box29{
    width:292px;
    height:55px;
    background-color:white;
    margin-left:41px;
    margin-top:24px;
    position: relative;
    display:flex;
}
.box29 img{
    height:55px;
    width:55px;
}
.box29 p img{
    width:16px;
    height:16px;
}
.box29 p{
    margin-left:10px;
    margin-top:3px;
}
.box30{
    height:25px;
    width:63px;
    border:2px solid gray;
    border-radius: 5px;
    position:absolute;
    right:2px;
    top:10px;
}
.box30 img{
    height:16px;
    width:16px;
}
/* 约翰 */
.box31{
    width:292px;
    height:55px;
    background-color:white;
    margin-left:41px;
    margin-top:24px;
    position: relative;
    display:flex;
}
.box31 img{
    height:55px;
    width:55px;
}
.box32 p img{
    height:16px;
    width:16px;
}
.box32 p{
    margin-left:7px;
    margin-top:3px;

}
.box33 img{
    height:16px;
    width:16px;

}
.box33{
    height:25px;
    width:63px;
    border:2px solid gray;
    border-radius: 5px;
    position:absolute;
    right:2px;
    top:10px;
}
/* 新浪微博 */
.box34{
    width:373px;
    height:78px;
    background-color:#fbfbfb;
     


}
.box34 p {
    text-align: center;
}
.box34 .bang{
    height:38px;
    width: 293px;
    border:gray 2px solid;
    margin:0 auto;
    margin-top:15px;
    line-height:38px;


}
.box34 .tian{
    margin-top:5px;
}
.box34 .bang a{

    color:black;
    text-decoration: none;
}
.box34 .bang a:hover{
color:red;

}




    
    
</style>
</head>
<body>
    <div class="nav">
        <div class="black">
            <div class="wang">
                <img src="./图片/logo.png" >
                
            </div>
            <div class="box35">
                <ul>
                    <li><a target="_blank" href="./index.html">发现音乐</a></li>
                    <li><a target="_blank" href="./chang sir.html">我的音乐</a></li>
                    <li><a href="./meng sir.html" href="#">关注</a></li>
                    <li><a href="#">商城</a></li>
                    <li><a href="#">音乐人</a></li>
                    <li class="hot"><a href="#">下载客户端</a></li>
                      
                </ul>
            </div>
            <div class="box40">
                <div class="box36">
                    <img src="./图片/sousuo.png" >
                    <div class="box37"> 音乐/视频/电台/用户</div>

                </div>
                <div class="box38"> 
                    创作者中心
                </div>
                <div class="box39">
                    <img src="./图片/ren.png" >
                   
                </div>
            </div>
            

        </div>


    </div>
    
    <div class="big">
        <div class="box1"></div>
        <div class="box2">
            <div class="box3">
                <div class="box4">
                    <h1>动态</h1>
                    <div class="box5">
                        <button class="button1">发动态</button>
                        <button class="button2">发布视频</button>
                    </div>
                   
                </div>
                <div class="box6">
                近三个月无新歌发布
                </div>
                <div class="box7">
                    <div class="box8">
                        <a class="box9" href="#">云音乐小秘书&nbsp&nbsp&nbsp<span>分享单曲</a>
                        <div class="box10">08:00</div>
                    </div>
                    <div class="box11">
                        <a href="#">#早安世界#</a>
                        <span>我们生来就是高山</span
                    </div>
                    <div class="box12">
                        <img src="./图片/shipingtupian.png" >
                        <p class="box13">
                            神女劈观·唤情Devastation and Redemption
                            HOYO-MiX
                        </p>
                    </div>
                   <div class="box14">
                        <img src="./图片/pinglun.png" >
                   </div>
                   <div class="box15">
                    <ul>
                      <li class="mei"><a href="#">评论(40)</a></li>
                      <li><a href="#">转发(7)</a></li>
                      <li><a href="#"><img src="./图片/dianzan.png" >(405)</a></li>                       
                    </ul>
                    <br>
                    <br>
                    <hr>
                    <div class="box41">
                        <div class="box42">
                            <a class="box43" href="#">云音乐小秘书&nbsp&nbsp&nbsp<span>分享单曲</p>
                            <div class="box44">昨日22:00</div>

                        </div>
                        <div class="box45">
                            <a href="#">#晚安时光#</a>
                            <span>好喜欢看黄昏</span
                        </div>
                        <div class="box46">
                            <img src="./图片/video2.png" >
                            <p class="box47">
                                Chemtrails
                            </p>
                        </div>
                       <div class="box48">
                            <img src="./图片/picture2.png" >
                       </div>
                       <div class="box49">
                        <ul>
                          <li class="2"><a href="#">评论(40)</a></li>
                          <li><a href="#">转发(7)</a></li>
                          <li><a href="#"><img src="./图片/dianzan.png" >(405)</a></li>                       
                        </ul>
                        <br>
                        <br>
                        <hr>
                        



                    </div>
                   
                   </div>
                   

                </div>  
                                
                                                                
            </div>
            <div class="box16">
                <div class="box17">
                <img src="./图片/touxiang.png" >
                <p>秋凉惹人醉</p>
                 </div>
                 <div class="box18">
                    <ul>
                        <li>
                            <p>0</p>
                            <p>动态</p>


                        </li>
                        <li>
                            <p>3</p>
                            <p>关注</p>


                        </li>
                        <li>
                              <p>0</p>  
                              <p>粉丝</p>

                        </li>
                    </ul>


                 </div>
                    
            </div>
                <div class="box22">
                    <div class="ming">明星用户</div>
                    <div class="huan"><a href="#">换一批</a></div>
                    
                            
                </div>
                
                <div class="box25">
                    <div class="box26">
                        <img src="./图片/shangwenije.png">
                        <div class="box27">
                        <p>尚雯婕<img src="./图片/VIP.png" </p>
                        <p class="yuan">原创音乐唱作人</p>
                      </div>
                        <div class="box28"><img src="./图片/jiahao.png">关注</div>


                    </div>
                    <div class="box29">
                        <img src="./图片/zhouziyan.png" >
                        <p>周子琰 <img src="./图片/yingyue.png" ></p>
                        <div class="box30">
                            <img src="./图片/jiahao.png">关注
                        </div>



                    </div>
                    <div class="box31">
                        <img src="./图片/CJohnny.png" >
                        <div class="box32">
                            <p>池约翰CJohnny<img src="./图片/VIP.png"></p>
                            <p>MIC男团成员池约翰</p>
                        </div>
                        <div class="box33">
                            <img src="./图片/jiahao.png">关注
                        
                        </div>


                    </div>
                    <div class="box34">
                        <p class="tian">添加微博好友，和他们分享音乐 </p>
                        <p class="bang"><a href="./图片/xinglangweibo.png">绑定新浪微博</a></p>


                    </div>

                   

                   
                    
                </div>
            
            
        </div>
                    
        
    







    </div>
   
    
</body>
</html>